class Charts {
   
    constructor() {
       this.instance = null
       this.context = null
       this.width = 200
       this.height = 150
       this.radius = 100
       this.shape = 'circle' // circle 圆形
       this.border = 'fillet' // fillet 圆角，rectangle 直角
       this.lineWidth = 10 // 划线的宽度
       this.lineCap = ''
       this.isCenter = true
    }
    
    static getInstance = () => {
       if (this.instance != null) {
          return this.instance
       }
       this.instance = new Charts()
       return this.instance
    }
    
    initContext(ctx) {
       this.context = ctx
    }
    
    /**
     * @param {Object} size
     *    width
     *    height
     * @param {String} shape
     *    circle
     * @param {Object} isCenter
     *    true|false
     */
    setOption(size, style, isCenter) {
       // 画布大小
       this.width = size.width
       this.height = size.height
       this.radius = size.radius
       // 形状 circle
       this.shape = style.shape
       this.border = style.border
       this.lineWidth = style.lineWidth
       this.lineCap = style.lineCap
       // 是否以中心作画
       this.isCenter = isCenter
    }
    
    getCenterPosition() {
       const _position = { x: 0, y: 0 }
       if (this.isCenter) {
          _position['x'] = this.width / 2
          _position['y'] = this.height / 2
       }
       return _position
    }
    
    drawCircle() {
       
    }
    
    drawLine() {
       
    }
    
    /**
     * @param {Number} radius
     * @param {Number} startAngle
     * @param {Number} endAngle
     * @param {String} strokeStyle
     * @param {Number} lineWidth
     */
    drawCustomCircle(startAngle, endAngle, strokeStyle = '#f4664a', lineWidth, radius, fill) {
       this.context.beginPath()
       this.context.fillStyle = fill ? strokeStyle : ''
       this.context.strokeStyle = fill ? '' : strokeStyle
       this.context.lineWidth = lineWidth || this.lineWidth
       this.context.lineCap = this.lineCap
       const { x, y } = this.getCenterPosition()
       this.context.arc(x, y, (radius || this.radius), startAngle, endAngle, false)
       if (fill) {
          this.context.fill()
       } else {
          this.context.stroke()
       }
    }
    
    /**
     * @param {Number} position_x
     * @param {Number} position_y
     * @param {Number} text
     * @param {String} fillStyle
     * @param {String} font
     */
    drawText(position_x, position_y, text, fillStyle = '#30bf78', font = 'bold 16px Arial') {
       ctx.font = font;
       ctx.fillStyle = fillStyle;
       ctx.fillText(text, position_x, position_y);
       ctx.stroke()
    }
    
    clean() {
       this.context.clearRect(0, 0, this.width, this.height)
    }
    
    render() {
       this.context.draw()
    }
 }
 
 export default Charts